<template>
	<div>
		<el-dialog v-model="showDialog" title="客户地址" width="900px" draggable>
			<el-table :data="addressList" style="width: 100%" height="400" border>
				<el-table-column fixed prop="name" label="收件人" width="120" />
				<el-table-column prop="name" label="电话" width="150">
					<template #default="{ row }">
						<div>+{{ row.area_code }} {{ row.mobile }}</div>
					</template>
				</el-table-column>
				<el-table-column width="260" prop="name" label="地址">
					<template #default="{ row }">
						<div>{{ row.nation }} {{ row.province }} {{ row.city }} {{ row.district }} {{ row.detailed }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="postcode" label="邮编" width="100" />
				<el-table-column prop="name" label="是否默认" width="100">
					<template #default="{ row }">
						<div>
							<span v-if="row.is_default == 1" style="color: var(--el-color-primary)">是</span>
							<span v-if="row.is_default == 2">否</span>
						</div>
					</template>
				</el-table-column>

				<el-table-column label="操作" prop="addtime" width="130" fixed="right">
					<template #default="{ row }">
						<el-button v-if="row.is_default == 2" @click="setDefault(row)" type="primary">设置为默认</el-button>
					</template>
				</el-table-column>
			</el-table>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取消</el-button>
					<el-button type="primary" @click="showDialog = false">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, toRaw } from "vue";
import { getClientAddress, setClientAddress } from "@/api/modules/address";
import { ElMessage, ElMessageBox } from "element-plus";

const emit = defineEmits(["update:showDialog"]);
const props = defineProps({
	showDialog: {
		required: true,
		type: Boolean
	},
	clientId: {
		required: false,
		type: Number
	}
});
const showDialog = computed({
	get() {
		return props.showDialog;
	},
	set(value) {
		emit("update:showDialog", value);
	}
});
const addressList = ref();
watch(
	() => showDialog.value,
	() => {
		if (showDialog.value) {
			getClientAddress({ client_id: props.clientId }).then(res => {
				addressList.value = res.data;
			});
		}
	}
);
const setDefault = (row: any) => {
	setClientAddress({
		id: row.id,
		cid: props.clientId
	}).then(() => {
		getClientAddress({ client_id: props.clientId }).then(res => {
			addressList.value = res.data;
		});
		ElMessage.success("设置成功");
	});
};
</script>

<style lang="scss" scoped></style>
